<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<view class="nav-title">新品推荐</view>
			<view class="nav-right">
				<u-icon name="more-dot-fill" size="20" color="#333" @click="showMore"></u-icon>
				<u-icon name="eye" size="20" color="#333" @click="viewHistory"></u-icon>
			</view>
		</view>

		<!-- 商品网格 -->
		<view class="products-grid">
			<view 
				class="product-item" 
				v-for="(item, index) in productList" 
				:key="index"
				@click="onProductClick(item)"
			>
				<image :src="item.img" class="product-img" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-title">{{ item.title }}</text>
					<view class="product-price">¥ {{ item.price }}</view>
					<view class="product-tag" v-if="item.tag">{{ item.tag }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [
					{
						id: 1,
						img: '/static/logo.png',
						title: '白个',
						price: '0.01',
						tag: '新品'
					},
					{
						id: 2,
						img: '/static/logo.png',
						title: '晋城公园门票',
						price: '0.01',
						tag: '热销'
					},
					{
						id: 3,
						img: '/static/logo.png',
						title: '123',
						price: '0.01',
						tag: '新品'
					},
					{
						id: 4,
						img: '/static/logo.png',
						title: '书包',
						price: '80.00',
						tag: '推荐'
					},
					{
						id: 5,
						img: '/static/logo.png',
						title: 'Double Wear Stay-in-Place Foundation',
						price: '299.00',
						tag: '新品'
					},
					{
						id: 6,
						img: '/static/logo.png',
						title: '全自动背锅侠',
						price: '299.00',
						tag: '热销'
					},
					{
						id: 7,
						img: '/static/logo.png',
						title: '新款夹棉保暖羊毛长款毛呢',
						price: '448.00',
						tag: '新品'
					},
					{
						id: 8,
						img: '/static/logo.png',
						title: '双排扣西装外套',
						price: '315.00',
						tag: '推荐'
					}
				]
			}
		},
		onLoad() {
			// 页面加载时的初始化
			console.log('新品推荐页面加载');
			this.loadNewProducts();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadNewProducts();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 加载新品推荐数据
			loadNewProducts() {
				// 这里可以调用API获取数据
				// 目前使用静态数据
				console.log('加载新品推荐数据');
				
				// 模拟API调用
				// uni.request({
				//   url: 'your-api-url/new-products',
				//   method: 'GET',
				//   success: (res) => {
				//     this.productList = res.data;
				//   },
				//   fail: (err) => {
				//     console.error('获取新品推荐失败:', err);
				//   }
				// });
			},
			
			goBack() {
				uni.navigateBack();
			},
			showMore() {
				uni.showToast({
					title: '更多功能',
					icon: 'none'
				});
			},
			viewHistory() {
				uni.showToast({
					title: '查看历史',
					icon: 'none'
				});
			},
			onProductClick(item) {
				uni.showToast({
					title: `查看商品: ${item.title}`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

/* 商品网格 */
.products-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	gap: 20rpx;
}

.product-item {
	width: calc(50% - 10rpx);
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.product-img {
	width: 100%;
	height: 300rpx;
	background-color: #f8f8f8;
}

.product-info {
	padding: 20rpx;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.product-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #FF4444;
	margin-bottom: 10rpx;
}

.product-tag {
	display: inline-block;
	background-color: #FF4444;
	color: #fff;
	font-size: 20rpx;
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
}
</style> 